<template>
	<view class="fens_order">
		<title :center="true" @titleHeight='setPaddingTop' title="粉丝订单" iconSize="38" bgcolor="linear-gradient(45deg, #f43f3b, #ec008c)" color="#FFF"
			@toclick="toBack(1)"icon="/static/img/other/to-back.png">
		</title>
		<view class="fens_body" v-if="account" >
			<view class="fens_order_top_con">
				<view class="fens_content" :style=" 'top:' + paddingTop + 'px' ">
					<image class="ima" src="../../static/img/other/a.png" mode="widthFix"></image>
					<view class="X">
					</view>
					<view class="Y">
					</view>
					<view class="fens_content_con" >
						<view class="one left top v">
							<text>订单总数</text>
							<view class="n">
								{{account.all_order}}
							</view>
						</view>
						<view class="two top v">
							<text>订单总额</text>
							<view class="n">
								{{account.all_order_money.orderMoney | jine}}
							</view>
						</view>
						<view class="three left bottom v">
							<text>今日订单总数</text>
							<view class="n">
								{{account.today_order}}
								<text class="iconfont iconshengjiangjiantou_huaban1 icon"></text>
							</view>
						</view>
						<view class="four bottom v">
							<text>今日订单总额</text>
							<view class="n">
								{{account.today_order_money.orderMoney | jine}}
								<text class="iconfont iconshengjiangjiantou_huaban1 icon"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fens_order_top" :style=" 'padding-top:' + paddingTop * 1.06 + 'px' ">
				<u-search placeholder="请输入订单号" v-model="value" class="youhui" :clearabled="true" :show-action="false"
					search-icon="search"></u-search>
				<view class="index-movie-red" @click="search">
					搜索
				</view>
			</view>
			<view class="fens_order_content">
				<view class="block" v-for="(item,index) in orderList" :key='index'>
					<view class="block_top">
						<view class="mn">
							{{item.mn | ellipsis(12)}}
							<view class="t">{{item.count}}张</view>
						</view>
						<text class="orderInfo">
							{{item.orderno}}
						</text>
					</view>
					<view class="block_bottom">
						<view class="block_bottom_top">
							<view class="place">{{item.cn}}</view>
							<view class="price" v-if="item.status == 4 || item.status == 2 || item.status == 3">
								<text v-if="item.status == 4">+</text> 
								{{item.price}}
							</view>
						</view>
						<!-- // status 4:已结算 5：结算失败 2。3 ：带结算 -->
						<view class="block_bottom_bottom">
							<view class="time">
								<!-- 周五 04月27日 13:15-14:45 -->
								{{item.show_time | getWeekByDay}} {{item.show_time | changeDate}}
							</view>
							<view class="date">
								{{item.created_at | changeTime}}
								<view v-if="item.status == 4" class="small">
									已结算
								</view>
								<view v-else-if="item.status == 5" class="small" :class="item.status == 5 ?'gray':'' ">
									结算失败
								</view>
								<view v-else class="small" :class="item.status !== 4 && item.status !== 5 ? 'blue':'' " >
									待结算
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	export default {
		data() {
			return {
				paddingTop:0,
				timer:null,
				limit: 20,
				value:'',
				offset: 0,
				orderList:[],
				// 账户
				account:'',
			}
		},
		components: {
			title
		},
		onShow() {
			this.getUserAuth()
		},
		onLoad() {
			this.getDate()
		},

		onReachBottom() {
			if(this.timer != null){
				clearTimeout(this.timer)
			}
			this.offset = this.offset + this.limit
			this.timer = setTimeout(() => this.getDate(),1000)
		},
		filters:{
			changeTime(val){
				return val.replace(/(:\d{2})$/g,'')
			},
			changeDate(val){
				return val.split(' ')[0].replace(/(\d{4}-)/g,'')
			},
			jine(val){
				if(!val){
					return 0
				}else{
					return val
				}
			}
		},
		methods: {
			setPaddingTop(data){
				this.paddingTop = data.height
				console.log('paddingTop',this.paddingTop)
			},
			// 获取金额
			getUserAuth(){
				uni.showLoading({
					title: '加载中'
				})
				this.$api.getUserAuth().then(res =>{
					this.account = res.data.data
					uni.hideLoading()
				})
			},
			// 跳转
			toBack(i) {
				uni.navigateBack({
					delta: i
				})
			},
			// 搜索
			search(){
				this.orderList = []
				this.offset = 0
				this.getDate(this.value)
			},
			// 获取数据
			getDate(v = "") {
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let data = {
					limit: this.limit,
					offset: this.offset,
					orderno: v
				}
				this.$api.getMyOrder(data).then((res) => {
					if(res.data.data.rows.length > 0){
						this.orderList = [...this.orderList,...res.data.data.rows]
						uni.hideLoading()
					}else{
						uni.hideLoading()
						uni.showToast({
							title:'没有数据了',
							icon:'none'
						})
					}
				})
			},
			// 初始化获取数据
			initData(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let data = {
					limit: this.limit,
					offset: this.offset
				}
				this.$api.getMyOrder(data).then((res) => {
					if(res.data.data.rows.length > 0){
						this.orderList = res.data.data.rows
						uni.hideLoading()
					}else{
						uni.hideLoading()
						uni.showToast({
							title:'没有数据了',
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.fens_order {
		background-color: #F1F1F1;
		width: 100vw;

		.fens_body {
			
			.fens_order_top_con{
				position: relative;
				width: 100vw;
				height: 276rpx;
				background:linear-gradient(45deg, #f43f3b, #ec008c);
				z-index: 20;
				.fens_content{
					position: absolute;
					width: 708rpx;
					height: 277rpx;
					left: 50%;
					transform: translateX(-50%);
					margin: auto;
					.X{
						position: absolute;
						bottom: 50%;
						left: 50%;
						transform: translateX(-50%) translateY(50%);
						width: 655rpx;
						height: 1rpx;
						background-color: #EFEFEF;
						// background-color: red;
						z-index: 50;
					}
					.Y{
						position: absolute;
						width: 1rpx;
						height: 194rpx;
						bottom: 50%;
						left: 50%;
						transform: translateX(-50%) translateY(50%);
						background-color: #EFEFEF;
						// background-color: red;
					}
					.ima{
						position: absolute;
						// top: 30rpx;
						bottom: 0;
						width: 100%;
						// height: 100%;
					}
					.fens_content_con{
						width: 100%;
						height: 100%;
						// padding-top: 50rpx;
						position: relative;
						z-index: 30;
						display: grid;
						grid-template-columns: auto auto;
						grid-template-rows: 50% 50%;
						justify-content: space-around;
						align-content: space-around;
						.left{
							margin-left: -80rpx;
						}
						.top{
							margin-top: 30rpx;
						}
						.bottom{
							padding-top: 20rpx;
						}
						.v{
							font-size: 24rpx;
							color: #666666;
							.n{
								font-size: 30rpx;
								font-weight: bold;
								color: #333333;
								margin-top: 12rpx;
							}
							.icon{
								color: red;
								margin-left: 10rpx;
							}
						}
					}
				}
			}

			.fens_order_top {
				background-color: #F1F1F1;
				// height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 20rpx;
				position: relative;

				.youhui {
					width: 85%;
					height: 64rpx;
					background: #FFFFFF;
					margin-right: 30rpx;
					border-radius: 30rpx;
					font-size: 26rpx;
					.u-content{
						background-color: #FFFFFF !important;
					}
					.u-input{
						background-color: #FFFFFF !important;
					}
				}

				.index-movie-red {
					background-color: #f1255d;
					color: #fff;
					font-size: 28rpx;
					width: 130rpx;
					height: 62rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.fens_order_content {
				padding: 0rpx 25rpx 20rpx 25rpx;

				.block {
					background-color: white;
					box-shadow: 0px 4rpx 4rpx 0px rgba(179, 179, 179, 0.26);
					border-radius: 8rpx;
					padding: 21rpx 23rpx;
					margin-bottom: 28rpx;

					.block_top {
						width: 100%;
						display: grid;
						grid-template-columns: auto auto;
						justify-items: end;
						padding-bottom: 22rpx;
						border-bottom: 1px solid #EFEFEF;
						font-size: 24rpx;
						color: #999999;
						.mn{
							font-size:26rpx; 
							color: #333333;
							justify-self: start;
							display: flex;
							align-items: center;
							.t{
								display: inline-block;
								margin-left:8rpx;
								color: #999999;
								padding: 2rpx 5rpx 2rpx 5rpx;
								border: 1rpx solid #999999;
								border-radius: 4rpx;
								font-size:18rpx;
								vertical-align: middle;
							}
						}
					}
					.block_bottom{
						margin-top:27rpx;
						font-size: 24rpx;
						.block_bottom_top{
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							 flex: 1;
							margin-bottom: 27rpx;
							.place{
								width: 70%;
								color: #333333;
								font-size: 25rpx;
							}
							.price{
								color:#EF3B5D;
								font-size: 30rpx;
								font-weight: bold;
							}
						}
						.block_bottom_bottom{
							width: 100%;
							display: flex;
							justify-content: space-between;
							flex: 1;
							color: #999999;
							.time{
								font-weight: 400;
							}
							.date{
								display: flex;
								align-items: center;
								.small{
									color: white;
									margin-left: 8rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 20rpx;
									padding: 3rpx 7rpx;
									background-color: #33B94C;
									border-radius: 4rpx
								}
								.gray{
									background-color: #809098;
								}
								
								.blue{
									background-color: #1796CF;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
